<template>
  <div id="category">
    <el-tree :data="categories" :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
  export default {
    name: "CategoryTree",
    data() {
      return {
        categories: [],
        defaultExpandedKeys: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    methods: {
      getCategories() {
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({data}) => {
          this.categories = data.data
        })
      },
      handleNodeClick(data) {
        if (data.catLevel === 3) {
          this.$emit("treeNodeClick", data)
        }
      }
    },
    created() {
      this.getCategories();
    }
  }
</script>

<style lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }


</style>
